<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <button style="height:0;width: 0;padding: 0;border: none;"></button>
            <span>发送模板消息</span>
        </div>
        <div class="detail_form">
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">发送模板消息</span>
                </div>
                <el-form label-width="120px" ref="form" :model="form">
                    <el-form-item label="openid" prop="openid">
                        <el-input v-model="form.openid" placeholder="请输入接收人的openid,多个用户可用空格隔开"></el-input>
                    </el-form-item>
                    <el-form-item label="链接" prop="path">
                        <el-input v-model="form.path" placeholder="请输入跳转链接的url"></el-input>
                    </el-form-item>
                    <el-form-item label="模板" prop="template">
                        <el-select v-model="form.template" placeholder="请选择">
                            <el-option
                                    v-for="item in common.templates"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.template" v-for="item in common.templates_detail[form.template]" :key="item.field" :label="item.description" :prop="item.field">
                        <el-input v-model="form.data[item.field]" :placeholder="'请输入'+item.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit" :loading="sending">发送</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </el-drawer>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        name: "TemplateSendDialog",
        computed:{
            ...mapState(['common']),
        },
        data() {
            return {
                show: false,
                form:{
                    openid:'',
                    path:'',
                    template:'',
                    data:{},
                },
                sending:false,
            }
        },
        mounted(){
            // 查询模板信息
            this.$store.dispatch('templates');
        },
        methods:{
            init(){
                this.show = true;
            },
            submit(){
                let form = this.form;
                console.log(form);
                if(!form.openid){
                    this.$message.error('请输入接收人的openid');
                }
                if(!form.template){
                    this.$message.error('请选择推送的模板类型');
                }
                this.sending = true;
                this.post('/api/setting/template/send',form).then(result=>{
                    if(result.code === 0){
                        this.$message.success(result.msg);
                        this.$emit('refresh');
                        this.show = false;
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.sending = false;
                })
            },

        }

    }
</script>

<style scoped>
    .detail_form{
        padding: 0 10px;
    }
    .detail_form .el-card{
        margin-bottom: 10px;
    }
    .detail_form .el-card__header{
        padding: 8px 20px;
    }
    .box-card {
        width: 100%;
    }
</style>